const ESLintPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");   // node.js core module to process the path problem

module.exports = {
    // configure webpack entry, using relative location
    entry: "./src/main.js", 

    // configure webpack output file location, using absolute location
    output: {
        // output file path 
        // __dirname: node.js variable represents the directory name where the current 
        // webpack.config.js file is located.
        path: path.resolve(__dirname, "../dist"), // dist is the root dirctory for the whole packaged files

        // ultimate result file name
        filename: "static/js/main.js" ,                  // filename is the packaged entry file's path. 
        
        // clean the last output directory automatically
        clean: true
    }, 

    // configure webpack loader 
    module: {
        rules: [
            // the rules of the loader

            // css loader
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            },

            // image loader
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/,
                type: 'asset',
                // image convertion configuration
                parser: {
                    dataUrlCondition: {
                      maxSize: 5 * 1024 // 5kb
                    }
                },

                generator: {
                    // customize image output filename
                    filename: 'static/images/[hash:10][ext][query]',
                }
            },

            // font loader
            {
                test: /\.(ttf|woff2?)$/,
                type: "asset/resource",
                generator: {
                    filename: 'static/media/[hash][ext][query]',
                }
            },

            // babel loader
            {
                test: /\.(js)$/,
                exclude: /node_modules/,   // babel needn't to process the js files in the node_modules 
                loader: 'babel-loader',
                // options: {
                //     presets: [
                //         ['@babel/preset-env', { targets: "defaults" }]
                //     ]
                // }
            }
        ]
    }, 

    // configure webpack plugin
    plugins: [
        // the configuration of the webpack plugins
        // eslint plugin
        new ESLintPlugin({
            context: path.resolve(__dirname, "../src")
        }),

        // html plugin
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "../public/index.html"),
        }),

        new MiniCssExtractPlugin({
            filename: "static/css/main.css"
        }),
    ], 

    // mode
    mode: "production"
};